<template>
  <div style="width:1260px;"> <!--1200px-->

    <el-card shadow="hover" style="width:1140px;height:160px;float: left;margin-left: 50px;margin-top: 20px;">
      <div style="width:1140px;height:150px;margin-top: 20px;">
        <img src="../../assets/avatar/管理-圆.png" style="width:70px;height: 70px;float: left;" />
        <div style="margin-left:25px;float:left;margin-top: 10px;">
          <span style="font-weight: 900;font-size: large;">
            {{ loginUsername }}
            <!-- <el-button type="text" class="el-icon-edit"></el-button> -->
          </span><br>

          <span style="font-size: small;">登录名: {{ loginUsername }}</span><br>
          <span style="font-size: small;">
            账号状态:
            <el-tooltip class="item" effect="dark" content="您的账号已启用" placement="right">
              <el-button type="text" size="small">启用</el-button>
            </el-tooltip>
          </span><br>
          <!-- <span style="font-size: small;">
            <el-button type="primary" size="mini" icon="el-icon-tickets" round>操作日志</el-button>
          </span><br> -->
        </div>


        <div style="float:left;margin-left: 110px;margin-top: 30px;font-size:small">
          <span style="float: left">
            <span>昨日营业额: {{ yesEntryMoney }} 元</span><br><br>
            <span>昨日订单数: {{ yesOrder }} 笔</span><br><br>
          </span>
        </div>


        <div style="float:left;margin-left: 280px;margin-top: -10px;">
          <div style="width:120px;height:105px;border-left: dashed 2px;float:left;">
            <span style="margin-left: 45px;">
              <svg-icon icon-class="播放" style="width:30px;height:30px"></svg-icon><br>
              <div style="width:120px;height:105px;text-align: center;">
                <br><i style="font-size: small;">电影总数</i><br>
                <i>{{ countMovie }}</i>
              </div>
            </span>
          </div>
          <div style="width:120px;height:105px;float:left;">
            <span style="margin-left: 45px;">
              <svg-icon icon-class="布控审核" style="width:30px;height:30px"></svg-icon><br>
              <div style="width:120px;height:105px;text-align: center;">
                <br><i style="font-size: small;">订单总额</i><br>
                <i>{{ countOrder }}</i>
              </div>
            </span>
          </div>
          <div style="width:120px;height:105px;float:left;">
            <span style="margin-left: 45px;">
              <svg-icon icon-class="人数" style="width:30px;height:30px"></svg-icon><br>
              <div style="width:120px;height:105px;text-align: center;">
                <br><i style="font-size: small;">用户人数</i><br>
                <i>{{ countUser }}</i>
              </div>
            </span>
          </div>
        </div>

      </div>


    </el-card>


    <el-card shadow="hover" style="width:650px;height:500px;float: left;margin-left: 50px;margin-top: 20px;">    
      <div slot="header" style="text-align:center;">
        <svg-icon icon-class="fsux_图表_柱状图" style="width:22;height:22;" />
        <span style="margin-left:20px">影院订单量</span>
      </div>
      <div class="right2">
        <div id="DynamicChart" style="width: 800px;height:600px;"></div>
      </div>
    </el-card>



    <el-card shadow="hover" style="width:470px;height:500px;float:left;margin-left: 20px;margin-top: 20px;">
      <div slot="header" style="text-align:center">
        <svg-icon icon-class="fsux_图表_环图" style="width:22;height:22;" />
        <span style="margin-left:20px">用户等级占比</span>
      </div>
      <div class="right">
        <div id="CircleChart" style="width: 400px;height:400px;float: right;"></div>
      </div>
    </el-card>

    <!-- <el-card shadow="hover" style="width:650px;height:500px;float: left;margin-left: 50px;margin-top: 20px;">
      <div slot="header" style="text-align:center">
        <svg-icon icon-class="fsux_图表_折线图" style="width:22;height:22;" />
        <span style="margin-left:20px">影院订单流水</span>
      </div>
      <div class="left">
        <div id="LineChart" style="width: 600px;height:400px;margin-top:20px;float: left;"></div>
      </div>
    </el-card>

    <el-card shadow="hover" style="width:470px;height:500px;float:left;margin-left: 20px;;margin-top: 20px;">
      <div slot="header" style="text-align:center">
        <svg-icon icon-class="fsux_图表_螺旋图" style="width:22;height:22;" />
        <span style="margin-left:20px">影院评分</span>
      </div>
      <div class="right">
        <div id="NightingaleChart" style="width: 400px;height:400px;float: right;"></div>
      </div>
    </el-card> -->

  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getLine, getCircle,getData } from '../../api/dashboard'
import { getToken } from '@/utils/auth'

export default {

  data() {
    return {
      loginUsername: JSON.parse(sessionStorage.getItem("loginUser")),
      loginUserRole: JSON.parse(sessionStorage.getItem("loginUserRole")),
      yesEntryMoney: '',
      yesOrder: '',
      countMovie: '',
      countUser: '',
      countOrder: '',

      dynamicData: [],
      circleData: [],
      nameList: ['黑海','钻石','黄金','白银','青铜'],
      realCircleData: [],
    };
  },
  methods: {

    //初始数据
    getData() {
      getData(getToken()).then(res => {
        this.countMovie = res.result[0]
        this.countUser = res.result[1]
        this.countOrder = res.result[2]
        this.yesEntryMoney = res.result[3]
        this.yesOrder = res.result[4]
      })
    },

    //柱状图图表
    dynamicChart() {
      getLine(this.loginUsername, this.loginUserRole,getToken()).then(res => {
        this.dynamicData = res.result
        for (var i = 0; i < this.dynamicData.length; i++) {
          if (this.dynamicData[i] == null) {
            this.dynamicData[i] = '0'
          }
        }
        let dynamicChart = echarts.init(document.getElementById("DynamicChart"));
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },

          grid: {
            left: '3%',
            right: '4%',
            width: 550,
            height: 350,
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ["4月30日", "5月1日", "5月2日", "5月3日", "5月4日", "5月5日", "5月6日"],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '订单总额(元)',
              type: 'bar',
              barWidth: '60%',
              data: this.dynamicData
            }
          ]
        };
        dynamicChart.setOption(option)
      })


    },



    //圆形图表
    circleChart() {
      getCircle(getToken()).then(res => {
        this.circleData = res.result
        for(var i=0; i<this.circleData.length;i++){
          this.realCircleData.push({name:this.nameList[i], value:this.circleData[i]})
        }
        console.log(this.realCircleData)
        let circleChart = echarts.init(document.getElementById("CircleChart"));
        let option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.realCircleData
            }
          ]
        };
        circleChart.setOption(option);
      })

    },


    // //折线图图表
    // lineChart() {
      
    //   // 基于准备好的dom，初始化echarts实例
    //   let lineChart = echarts.init(document.getElementById("LineChart"));
    //   // 指定图表的配置项和数据
    //   let option = {
    //     title: {
    //       text: ''
    //     },
    //     tooltip: {
    //       trigger: 'axis'
    //     },
    //     legend: {
    //       data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    //     },
    //     grid: {
    //       //x: 100,
    //       // y: 100,
    //       left: '3%',
    //       right: '4%',
    //       bottom: '3%',
    //       containLabel: true
    //     },
    //     toolbox: {
    //       feature: {
    //         saveAsImage: {}
    //       }
    //     },
    //     xAxis: {
    //       type: 'category',
    //       boundaryGap: false,
    //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    //     },
    //     yAxis: {
    //       type: 'value'
    //     },
    //     series: [
    //       {
    //         name: 'Email',
    //         type: 'line',
    //         data: [0, 132, 101, 134, 90, 230, 210]
    //       },
    //       {
    //         name: 'Union Ads',
    //         type: 'line',
    //         data: [0, 182, 191, 234, 290, 330, 310]
    //       },
    //       {
    //         name: 'Video Ads',
    //         type: 'line',
    //         data: [0, 232, 201, 154, 190, 330, 410]
    //       },
    //       {
    //         name: 'Direct',
    //         type: 'line',
    //         data: [320, 332, 301, 334, 390, 330, 320]
    //       },
    //       {
    //         name: 'Search Engine',
    //         type: 'line',
    //         data: [820, 932, 901, 934, 1290, 1330, 1320]
    //       }
    //     ]
    //   };
    //   // 使用刚指定的配置项和数据显示图表。
    //   lineChart.setOption(option);
    // },


    // //仪表盘图
    // nightingaleChart() {
    //   let nightingaleChart = echarts.init(document.getElementById("NightingaleChart"))
    //   let option = {
    //     tooltip: {
    //       formatter: '{a} <br/>{b} : {c}%'
    //     },
    //     series: [
    //       {
    //         name: 'Pressure',
    //         type: 'gauge',
    //         progress: {
    //           show: true
    //         },
    //         detail: {
    //           valueAnimation: true,
    //           formatter: '{value}'
    //         },
    //         data: [
    //           {
    //             value: 66,
    //             name: ''
    //           }
    //         ]
    //       }
    //     ]
    //   };
    //   nightingaleChart.setOption(option)
    // }
  },
  watch: {
    lineChart() {
      this.lineChart()
    },
    circleChart() {
      this.circleChart()
    },
    dynamicChart() {
      this.dynamicChart()
    }
  },
  mounted() {
    // this.lineChart();
    this.getData();
    this.circleChart();
    this.dynamicChart();
    // this.nightingaleChart();
  }
};
</script>

